<style include="common">
  #wallpaperContainer {
    display: grid;
    grid-template-areas:
      '. leftspacertop    selected   rightspacertop    .'
      '. leftspacerbottom imagegrid  rightspacerbottom .';
    grid-template-columns: 1fr 16px minmax(568px, 920px) 16px 1fr;
    grid-template-rows: 172px minmax(0, 1fr);
    height: 100%;
    position: relative;
    width: 100%;
  }

  wallpaper-selected {
    background-color: var(--cros-bg-color);
    grid-area: selected;
    position: sticky;
    top: 56px;
    z-index: 1;
  }

  wallpaper-collections,
  wallpaper-images,
  google-photos-collection,
  local-images {
    grid-area: imagegrid;
    padding: 12px 0 32px 0;
  }

  :host-context(body.jelly-enabled) div[class$='spacertop'] {
    position: sticky;
    top: 56px;
    z-index: 1;
  }

  :host-context(body.jelly-enabled) wallpaper-selected {
    background-color: var(--cros-sys-app_base_shaded);
  }

  :host-context(body.jelly-enabled) wallpaper-collections,
  wallpaper-images,
  google-photos-collection,
  local-images {
    background-color: var(--cros-bg-color);
  }
</style>
<div id="wallpaperContainer">
  <!-- Prevent left margin from collapsing on narrow window in RTL -->
  <div class="leftspacertop"></div>
  <div class="leftspacerbottom"></div>
  <wallpaper-selected path="[[path]]" collection-id="[[queryParams.id]]"
      google-photos-album-id="[[queryParams.googlePhotosAlbumId]]"
      is-google-photos-album-shared="[[isGooglePhotosAlbumShared_]]">
  </wallpaper-selected>
  <!-- do not use hidden$ here - need to listen on property change in
          these elements. -->
  <wallpaper-collections hidden="[[!shouldShowCollections_(path)]]">
  </wallpaper-collections>
  <template is="dom-if" if="[[shouldShowCollectionImages_(path)]]" restamp>
    <wallpaper-images collection-id="[[queryParams.id]]"></wallpaper-images>
  </template>
  <template is="dom-if" if="[[isGooglePhotosIntegrationEnabled_]]">
    <google-photos-collection path="[[path]]"
        album-id="[[queryParams.googlePhotosAlbumId]]"
        hidden="[[!shouldShowGooglePhotosCollection_(path)]]">
    </google-photos-collection>
  </template>
  <local-images hidden="[[!shouldShowLocalCollection_(path)]]">
  </local-images>
  <!-- Prevent the right margin from collapsing when window gets very
           narrow -->
  <div class="rightspacertop"></div>
  <div class="rightspacerbottom"></div>
  <wallpaper-fullscreen></wallpaper-fullscreen>
</div>
